<template>
  <div>
    <hr>
    <h5>
      Reactive组件 -- 定义响应式数据, 只能用于复杂数据类型Obj
    </h5>
    <hr>
    <div>
      <button @click="updateName">非响应式修改 per.name 名字</button>
      <p>per.name: {{ per.name }} | per.age: {{ per.age }}</p>
      <hr>
      <button @click="updateNameResponsive">响应式修改 responsiveObj.name 名字</button>
      <p>responsiveObj.name: {{ responsiveObj.name }} | per.age: {{ responsiveObj.age }}</p>
    </div>
  </div>
</template>

<script>
import {reactive} from "vue";

export default {
  name: "Reactive",
  /**
   * Reactive是一个函数, 它可以定义一个复杂数据类型, 成为响应式数据
   * 通常是用来定义响应式对象数据
   */
  setup() {
    // 普通数据
    const per = {
      name: 'llhuang10',
      age: 23
    }

    // 响应式数据
    const responsiveObj = reactive({
      name: 'llhuang10',
      age: 23
    })

    // 非响应式修改名字函数
    const updateName = () => {
      console.log(`click before -----per.name: ${per.name}`)
      per.name = 'springandme'
      console.log(`click after -----per.name: ${per.name}`)
    }

    // 响应式修改名字函数
    const updateNameResponsive = () => {
      console.log(`Responsive click before ----- responsiveObj.name: ${per.name}`)
      responsiveObj.name = 'hliushi'
      console.log(`Responsive click after ----- responsiveObj.name: ${per.name}`)
    }


    return {
      per,
      responsiveObj,
      updateName,
      updateNameResponsive
    }
  }
}
</script>

<style scoped>

</style>
